<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Multiplication Table</title>

<style>

    table {

        margin: 0 auto; /* Center the table */

        border-collapse: collapse;

    }

    td {

        width: 50px;

        height: 50px;

        text-align: center;

        vertical-align: middle;

        border: 1px solid black;

        transition: background-color 0.3s, color 0.3s; /* Smooth transition for color change */

    }

    td:hover {

        background-color: #add8e6; /* Light blue background on hover */

        color: #000000; /* Black text on hover */

    }

</style>

</head>

<body>



<table id="multiplicationTable"></table>



<script>

function generateMultiplicationTable() {

    const table = document.getElementById('multiplicationTable');

    for (let i = 1; i <= 9; i++) {

        const row = table.insertRow();

        for (let j = 1; j <= i; j++) {

            const cell = row.insertCell();

            cell.textContent = `${j}×${i}=${i * j}`;

        }

    }

}



generateMultiplicationTable();

</script>



</body>

</html>
